<%--
  Created by IntelliJ IDEA.
  User: YanHilin
  Date: 2020/4/19
  Time: 15:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户界面首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="http://localhost:8080/onlineflower/">
    <%@include file="/page/comment/head.jsp" %>
    <script src="static/js/jquery-3.4.1.js"></script>
    <style type="text/css">
        #headphoto {
            border-radius: 50%;
        }

        #center {
            margin: 10px auto;
        }

        #list {
            float: left;
            margin-top: 10px;
            margin-left: 30px;
            margin-bottom: 10px;
        }

        #price {
            color: red;
            font-size: 18px;
        }

        #price_code {
            font-size: 27px;
        }

        #cart {
            display: block;
            width: 150px;
        }

        #pageInput {
            width: 60px
        }

        #priceS {
            margin: auto;
            width: 100%;
            background-color: #86cfda;
        }
        #priceS div{
            margin-top: 15px;
        }

        #pageN {
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .footer{
            background-color: #7abaff;
        }
        input,button{
            border: none;
            height: 30px;
        }

    </style>

</head>
<body>
<%@include file="/page/user/head_nav.jsp" %>
<div id="priceS" class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <form action="client/flowerServlet" method="post">
            <input type="hidden" name="action" value="pageByPrice">
            <label>价格</label>
            <input type="text" style="width: 80px" name="min" value="${param.min}">
            <label>到</label>
            <input type="text" style="width: 80px" name="max" value="${param.max}">
          <%--  <input type="submit" value="查询">--%>
            <button type="submit"><svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
                <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
            </svg></button>
        </form>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <form action="client/flowerServlet" method="post">
            <input type="hidden" name="action" value="pageByName">
            <input type="text" name="flower_name" value="${param.flower_name}" placeholder="输入查查询的关键字">
           <%-- <input type="submit" value="查询">--%>
            <button type="submit"><svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
                <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
            </svg></button>
        </form>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <form action="client/flowerServlet" method="post">
            <input type="hidden" name="action" value="queryByFclassid">
            <select style="height: 30px;border: none" name="fclassid" id="exampleFormControlSelect1">
                <option value="1">公仔</option>
                <option value="2">玫瑰</option>
                <option value="3">满天星</option>
                <option value="4">向日葵</option>
                <option value="5">雏菊</option>
                <option value="6">勿忘我</option>
                <option value="7">风信子</option>
                <option value="8">木棉花</option>
                <option value="9">绣球花</option>
                <option value="10">水仙花</option>
                <option value="12">绿植</option>
                <option value="11">开张</option>
            </select>
           <%-- <input type="submit" value="查询">--%>
            <button type="submit"><svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
                <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
            </svg></button>
        </form>
    </div>
</div>
<div>
</div>
<div id="center" class="clearfix">
    <c:forEach items="${requestScope.page.item}" var="flower">
        <div id="list" class="card" style="width: 25rem;">
            <img src="static/picFlower/${flower.flower_photo}" class="card-img-top" alt="照片" style="height: 248px">
            <div class="card-body">
                <p class="card-text" style="height: 100px"><span style="padding: 2px;letter-spacing: 2px">${flower.flower_name}</span></p>
                <div class="cart">
                    <span class="card-title" id="price_code">￥<span id="price">${flower.price}&nbsp;&nbsp;
                </div>
                <br/>
                <div>
                    <button flowerid="${flower.flowerid}"  flowername="${flower.flower_name}" class="collect">收藏
                        <svg class="bi bi-heart" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                             xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                  d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"
                                  clip-rule="evenodd"/>
                        </svg>
                    </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="showDtail" flowerid="${flower.flowerid}">查看详情</button>
                </div>
                <br/>
              <%--  <div>
                    <button style="width: 22rem" flowerid="${flower.flowerid}" id="cart" class="btn btn-warning cart">
                        Add To Cart <span class="glyphicon glyphicon-shopping-cart"></span></button>
                </div>--%>
            </div>
        </div>
    </c:forEach>
</div>
<div class="footer">
    <%@include file="/page/comment/page_nav.jsp" %>
</div>
</body>
<script>
    $(function () {
        //给加入购物车链接加入单击事件
      /*  $("button.cart").click(function () {
            var flowerid = $(this).attr("flowerid");
            location.href = "http://localhost:8080/onlineflower/cartServlet?action=addItem&id=" + flowerid;
        })*/
        $("button.collect").click(function () {
            var flowerid = $(this).attr("flowerid");
            var flower_name = $(this).attr("flowername");
            console.log(flowerid,flower_name);
            $.getJSON("http://localhost:8080/onlineflower/collectServlet?action=ajaxQuery&flowerid="+flowerid,function (data) {

                if(data.existsId){
                   // alert(data)
                    alert(flower_name+"\n已收藏！")
                }else{
                   // alert(data)
                    location.href = "http://localhost:8080/onlineflower/collectServlet?action=add&id=" + flowerid;
                    alert(flower_name+"\n成功收藏！")
                }
            })
        });
        $("button.showDtail").click(function () {
            var flowerid = $(this).attr("flowerid");
            location.href = "http://localhost:8080/onlineflower/client/flowerServlet?action=showFlowerDetail&flowerid=" + flowerid;
        });
    })
</script>
</html>
